<script setup>
import {onMounted, ref} from "vue";
import {doDownload, doGet, doPost} from "../http/httpRequest.js";
import {showMessage} from "../util/utils.js";
import {useRoute, useRouter} from "vue-router";

//定义router对象，该对象中提供了一些路由方法供我们使用，比如router.push(), router.go()
let router = useRouter();
//定义route对象，该对象提供了一些路由属性/字段供我们使用，比如route.path;  route.params; 等等
let route = useRoute();

let customerList = ref([{
  ownerDO : {},
  activityDO : {},
  clueDO : {},
  appellationDO : {},
  needLoanDO : {},
  intentionStateDO : {},
  sourceDO : {},
  intentionProductDO : {}
}])
//分页时总共有多少条数据
let total = ref(0)
//分页时每页显示多少条数据
let pageSize = ref(0)

onMounted(()=> {
  loadCustomerByPage(1);
})

const loadCustomerByPage = (current) => {
  doGet('/api/customers', {
    current : current, //前面的current是参数名，后面的current是参数值
  }).then(resp => {
    if (resp.data.code === 200) {
      customerList.value = resp.data.data.list;
      total.value = resp.data.data.total;
      pageSize.value = resp.data.data.pageSize;
    } else {
      showMessage('数据加载失败', 'error');
    }
  })
}

//分页函数
const toPage = (value) => {
  loadCustomerByPage(value);
}

//查看详情
const view = (id) => {
  router.push('/dashboard/customer/detail/' + id);
}

const exportExcel = (ids) => {
  doDownload('/api/exportExcel', {
    ids : ids
  }).then(resp => {
    console.log(resp)
    if (resp.status === 200) {
      // 创建Blob对象
      const blob = new Blob([resp.data], { type: resp.headers['content-type'] });
      // 创建隐藏的链接<a href=''>标签
      const link = document.createElement('a');
      // 创建一个指向文件流大对象的临时链接
      link.href = URL.createObjectURL(blob);
      //<a>标签的样式是隐藏的
      link.style.display = 'none';
      // 将链接添加到DOM中
      document.body.appendChild(link);
      // 触发点击事件开始下载
      link.click();
      // 清理
      document.body.removeChild(link);
      URL.revokeObjectURL(link.href);
    }
  })
}

//批量导出(Excel)函数
const batchExportExcel = () => {
  exportExcel(null);
}

//定义一个客户id数组，初始值是空
let customerIdArr = [];

//勾选或取消checkbox时会执行该函数
const handleSelectionChange = (newSelection) => {
  customerIdArr = [];
  newSelection.forEach(item => {
    let id = item.id;
    customerIdArr.push(id);
  })
}

const chooseExportExcel = () => {
  if (customerIdArr.length <= 0) {
    showMessage('请选择要导出的数据', 'warning')
    return;
  }
  let ids = customerIdArr.join(','); // 数组[1,3,5,6,8,12]  ==> ids = "1,3,5,6,8,12";
  //导出Excel
  exportExcel(ids);
}
</script>

<template>
  <el-button type="primary" @click="batchExportExcel">批量导出(Excel)</el-button>
  <el-button type="success" @click="chooseExportExcel">选择导出(Excel)</el-button>

  <el-table
      :data="customerList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="50"/>
    <el-table-column type="index" label="序号" width="55"/>
    <el-table-column property="ownerDO.name" label="负责人"/>
    <el-table-column property="activityDO.name" label="所属活动"/>
    <el-table-column property="clueDO.fullName" label="姓名"/>
    <el-table-column property="appellationDO.typeValue" label="称呼"/>
    <el-table-column property="clueDO.phone" label="手机"/>
    <el-table-column property="clueDO.weixin" label="微信"/>
    <el-table-column property="needLoanDO.typeValue" label="是否贷款"/>
    <el-table-column property="intentionStateDO.typeValue" label="意向状态"/>
    <el-table-column property="sourceDO.typeValue" label="客户来源"/>
    <el-table-column property="intentionProductDO.name" label="意向产品"/>
    <el-table-column property="nextContactTime" label="下次跟踪时间"/>
    <el-table-column label="操作" width="85">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination :background="true"
                 layout="prev, pager, next, jumper, ->, total"
                 :page-size="pageSize"
                 :total="total"
                 @current-change="toPage"/>
</template>

<style scoped>
.el-table {
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>